<template>
  <div class="sup-info">

    <div class="sup-info-header" v-if="title">{{ title }}</div>

    <i class="sup-info-item sup-info-item-left-top" v-if="leftTop"></i>

    <i class="sup-info-item sup-info-item-left-bottom" v-if="leftBottom"></i>

    <i class="sup-info-item sup-info-item-right-top" v-if="rightTop"></i>

    <i class="sup-info-item sup-info-item-right-bottom" v-if="rightBottom"></i>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String
      },
      leftTop: {
        type: Boolean,
        default: true
      },
      leftBottom: {
        type: Boolean,
        default: true
      },
      rightTop: {
        type: Boolean,
        default: true
      },
      rightBottom: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import './index.styl';
</style>
